<template>
	<el-table :data="listData" style="width: 100%">
		<el-table-column label="服务名" prop="name"></el-table-column>
		<el-table-column label="类型" prop="type"></el-table-column>
		<el-table-column label="适用规格" prop="scope"></el-table-column>
		<el-table-column label="服务规格" prop="profiles"></el-table-column>
		<el-table-column label="耗时" prop="time"></el-table-column>
		<el-table-column label="服务员等级" prop="level"></el-table-column>
		<el-table-column label="价格" prop="price"></el-table-column>
		<!-- <el-table-column label="排片" prop="scheduling"></el-table-column> -->
		<el-table-column align="right" width="150px">
			<template slot="header" slot-scope="scope">
				<el-input v-model="search" size="mini" placeholder="输入关键字搜索" />
			</template>
			<template slot-scope="scope">
				<el-button size="mini" @click="handleEdit(scope.$index, scope.row)">更新</el-button>
				<el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
			</template>
		</el-table-column>
	</el-table>
</template>

<script>
	import {
		getGoods,
		removeGoods
	} from "@/service/goods.js"
	import {
		mapActions,
		mapState,
		mapMutations
	} from 'vuex'
	import {
		removeService
	} from "@/service/service.js"
	export default {
		async created() {
			this.show()
		},
		data() {
			return {
				tableData: [],
				search: ''
			}
		},
		computed: {
			...mapState("service", ["listData"]),
		},
		methods: {
			...mapMutations("service",["setUpdateService","setVisible"]),
			...mapActions("service", ["show"]),
			handleEdit(index, row) {
				this.setUpdateService(row)
				this.setVisible(true)
			},
			handleDelete(index, row) {
				removeService(row._id)
				this.show()
			}
		},
	}
</script>

<style>
</style>
